<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>7个你可能不认识的CSS单位</title>
	<style type="text/css" media="screen">
		html {
		    font-size: 14px;
		}
		div{
			margin-top: 10px;
		}
		.s2 {
		    font-size: 2rem;
		}
		.slide{
			height: 100vh;
			background-color: #CCC;
			/* border: 1px solid red; */
		}
		#header{
			font-size: 6vw;	
		}
	</style>
</head>
<body>
	<div class="slide">
		<header id="header" class="">
			字体大小会根据宽度变化
		</header><!-- /header -->
		<div class="main-container">
			<div class="s1">
				1 vh  等于1/100的视口高度。栗子：浏览器高度900px, 1  vh  = 900px/100 = 9 px。同理，如果视口宽度未750， 1 vw  = 750px/100 = 7.5 px。
			</div>
			<div class="s2">
				依赖单一的相对度量单位就好。这时候嘛，我们就可以使用  rem  了。 ‘r’是“root”的缩写，意思就是1rem等于根元素的字体大小；大部分情况下，根元素就是 <html> 元素了。
			</div>
			<div class="s3" style="font-size: 1.2em;">
				Test
				<div style="font-size: 1.2em">
					Test
					<div style="font-size: 1.2em">
						Test;
						em相对于父元素，所以字体会不断变大
					</div>
				</div>
			</div>

			<div class="s4">
				<span>X<sup style="position:relative;bottom: 1ex;">2</sup></span>
				<span>X<sup style="position:relative;bottom: -1ex;">2</sup></span>
			</div>
		</div>
	</div>
</body>
</html>